<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="wap-font-scale" content="no">
    <title>酒店评价</title>
    <!-- 公用样式css -->
    <link type="text/css" rel="stylesheet" href="css/base.css"  />
    <link type="text/css" rel="stylesheet" href="css/evaluate.css" />
    <link type="text/css" rel="stylesheet" href="css/app.css">
    <link type="text/css" rel="stylesheet" href="css/swiper.min.css"/>


    <style>
        .img-taol{ width:100%; padding:10px 0; text-align:center;}
        .img-taol >li{ width:32%; float:left; margin-left:1%;}
        .img-t{ width:100%;}
    </style>


    <style type="text/css">
        .figure-list{
            margin: 0;
            padding: 0;
            margin-left:5px;
        }
        .figure-list:after{
            content: "";
            display: block;
            clear: both;
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }
        .figure-list li{
            list-style: none;
            display:inline-block;
            width: 30%;
            margin: 0 2% 2% 0;
            position:relative;
        }
        .figure-list figure{
            border: 1px solid #eee;
            width: 100%;
            height: 0;
            overflow: hidden;
            margin: 0;
            padding-bottom: 100%; /* 关键就在这里 */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .figure-del{
            position:absolute;
            right:-8px;
            top:-5px;}
        .figure-list figure img{ width:100%;}
        .figure-list figure a{
            display: block;
            position: absolute;
            width: 100%;
            top: 0;
            bottom: 0;
        }

    </style>
</head>

<body>
<%--<header class="header">
   &lt;%&ndash; <div class="header-left"><img class="img-home" src="images/return.png" onclick="_backList();return false;"/></div>&ndash;%&gt;
    <div class="header-center word5 "><a class="header-arrow">评价</a></div>
    <div class="header-right marg4"></div>
</header>--%>


<div class="main" style="background:#fff;">
    <div class="evaluate_title"><span>${hotelName}</span><a class="float-r mar-a"><span class="wor-colour7">${commentNum}</span><span>条评论</span></a></div>
    <div id="starRating">
        <p class="photo">
            <c:forEach var="i" begin="1" end="${grade}">
                <img src="images/star1.png" width="16" height="16" style="margin-top:-2px;"/>
            </c:forEach>
            <c:forEach var="i" begin="1" end="${5-grade}">
                <img src="images/star.png" width="16" height="16" style="margin-top:-2px;"/>
            </c:forEach>
        </p>
        <p class="starNum">${grade}分</p>
    </div>
        <c:if test="${dataList != ''}">
            <c:forEach var="info" items="${dataList}">
            <div class="user_eval" style="background:#fff; margin-top:5px">
                <div class="user_eval_l"><img class="user_eval_img" src="images/headPic.png"/></div>
                <ul class="user_eval_r row_eval">
                    <li><span  class="float-l">${info.CreateUser}</span><span  class="float-r" style="margin-right: 1em">${info.CreateDate}</span></li>
                    <li>
                        <a class="float-l">
                            <c:forEach var="i" begin="1" end="${info.Grade}">
                                <img src="images/star1.png" width="16" height="16" style="margin-top:-2px;"/>
                            </c:forEach>
                            <c:forEach var="i" begin="1" end="${5-info.Grade}">
                                <img src="images/star.png" width="16" height="16" style="margin-top:-2px;"/>
                            </c:forEach>
                            <span>${info.Grade}分</span>
                        </a>
                    </li>
                    <li>${info.Remarks}</li>
                    <c:if test="${info.PicEvaluateList!=null && info.PicEvaluateList.size()!=0}">
                        <li class="eval_img_list">
                            <ul class="figure-list">
                                <c:forEach var="item" items="${info.PicEvaluateList}">
                                    <li><figure><img src="${item.PicAddress}"/></figure></li>
                                </c:forEach>
                            </ul>
                        </li>
                    </c:if>
                </ul>
            </div>
            </c:forEach>
        </c:if>
        <c:if test="${dataList.size()==0}"><img src="<%=basePath%>/images/icon38.png" style="width: 100%;"></c:if>
    <div class="big_img">
    	<img class="img_delete" src="<%=basePath%>/images/img_close.png">
        <div class="swiper-container2">
            <div class="swiper-wrapper">

            </div>
        </div>
        <div class="swiper-pagination2"></div>
    </div>
</div>

<form id="submitForm" action="home/hotelDetail" method="post">
    <input type="hidden" value="${hotelKey}" id="hotelKey" name="hotelKey"/>
    <input type="hidden" value="${startDate}" id="startDate" name="startDate"/>
    <input type="hidden" value="${endDate}" id="endDate" name="endDate"/>
    <input type="hidden" value="${cityName}" id="cityName" name="cityName"/>
    <input type="hidden" value="${city}" id="city" name="city"/>
    <input type="hidden" value="${lng}" id="lng" name="lng"/>
    <input type="hidden" value="${lat}" id="lat" name="lat"/>
    <input type="hidden" id="memKey" name="memKey" value="${sessionScope.memKey}">
    <input type="hidden" id="type" name="type" value="${type}">
</form>
</body>

<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/artDialog/artDialog.source.js?skin=simple"></script>
<script type="text/javascript" src="js/artDialog/plugins/iframeTools.source.js"></script>
<script type="text/javascript" src="js/star.js"></script>
<script type="text/javascript" src="js/rem.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        /*调起大图 S*/
        var mySwiper = new Swiper('.swiper-container2', {
            loop: false,
            pagination: '.swiper-pagination2',
        })
        $("figure").on("click",
            function() {
                var imgBox = $(this).find("img");
                var i = $(imgBox).index(this);
                $(".big_img .swiper-wrapper").html("")

                for(var j = 0 ,c = imgBox.length; j < c ;j++){
                    $(".big_img .swiper-wrapper").append('<div class="swiper-slide"><div class="cell"><img src="' + imgBox.eq(j).attr("src") + '" / ></div></div>');
                }
                mySwiper.updateSlidesSize();
                mySwiper.updatePagination();
                $(".big_img").css({
                    "z-index": 1001,
                    "opacity": "1"
                });
                mySwiper.slideTo(i, 0, false);
                return false;
            });

        $(".img_delete").on("click",
            function() {
                $(".big_img").css({
                    "z-index": "-1",
                    "opacity": "0"
                });

            });
        /*调起大图 E*/
    });
    //返回列表页
    function  _backList() {
        $("#submitForm").submit();
    }
</script>
</html>
